<template>
  <div class="DetailshopInfo">
     <div class="logo">
       <span><img :src="shop.logo" alt=""></span> <span>{{shop.name}}</span>
     </div>
    <div class="shopCenter">
        <div class="sell">
            <div><p>{{shop.sells}}</p> <p>总销量</p></div>
            <div><p>{{shop.goods}}</p> <p>全部宝贝</p></div>
            <!-- <div><p>{{shop.fans}}</p>  <p> 粉丝</p></div> -->
        </div>
      <div  class="score">
        <div v-for="item in shop.score" class="itemScore">
          <span>{{item.name}}</span> <span class="mark">{{item.score}}</span> <span class="isBetter">{{value}}</span>
        </div>
      </div>
   </div>


  <div class="shopLink">
      <a href="http://m.meilishuo.com/shop/index/1qty58">进店逛逛</a>
  </div>

 </div>
</template>

<script>
  export default {
    name:'DetailshopInfo',
    props:{
      shop:{
      type:Object,
      default(){
        return {}
      }
      }
    },
    data(){
     return{

        value:'低',

     }
    },
computed:{
   fun(){
      if(this.shop.score=5)
      this.value='高'
      else
      this.value='低'
    return value
   }
}



  }

</script>

<style  scoped>
.DetailshopInfo{
 margin: 20px 10px;
background-color: #fff;
border-bottom: 2px solid gainsboro;
background-color: #fff;
}
.logo {
  height: 50px;
  font-size: 20px;
  margin-bottom: 20px;
}
.logo img{
height: 50px;
vertical-align: middle;
margin-right: 10px;
border-radius: 50%;
}
.shopCenter{
display: flex;
text-align: center;
font-size: 13px;
color: rgb(19, 18, 18);
}
.shopCenter div{
flex: 1;
}
.sell{
 display: flex;
 height: 66px;
 line-height: 33px;
 border-right: 2px solid rgb(221, 217, 217);
}
.sell div{
flex: 1;

}


.score {
display: flex;
flex-direction: column;
text-align: center;
margin-left: 18px;
}
.itemScore {
 margin-bottom: 15px;
 text-align: left;
}
.isBetter{
position: absolute;
right: 15px;
}
.mark{
margin-left: 15px;
text-align: center;
}
.shopLink{
text-align: center;
margin-top: 20px;
margin-bottom: 30px;
}
.shopLink a{
background-color: rgb(235, 232, 232);
padding: 7px 50px;
border-radius: 10px;
}
/* .shopLink{

} */
</style>
